<template>
	<view>
		<view class="list-item"   v-for="item in newsList" :key="item.id" @click="judge()" >
			<image  class="headimg"  :src="item.operation_user.avatar" mode="aspectFill"></image>
			<view class="center">
				<view class="name">
					{{item.operation_user.nickname}}
				</view>
				<view class="content">
					{{item.content}}
					<text class="time">{{item.message_time}}</text>
				</view>
			</view>
			<image class="video_img" v-if="item.video && item.video.thumb" :src="item.video.thumb" mode="aspectFill"></image>
		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">请前往福叠猫App查看</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="tipShow = false">再想想</text>
					<text @click="godown()">现在去</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { interaction } from '../../api/other';
	export default {
		data() {
			return {
			page: 1,
			size: 20,
			status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			newsList:[],
			tipShow:false
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			judge(){
				// #ifdef MP-WEIXIN|| MP-ALIPAY
				uni.$u.toast('请前往福叠猫App查看')
				
				// #endif
				// #ifdef H5
					this.tipShow=true
				// #endif
			},
			godown(){
				this.tipShow=false
				uni.navigateTo({
					url:"/pageUser/download/download"
				})
			},
		initList() {
			let data = {
				page:this.page,
				page_size:this.size
			}
			interaction(data).then(res => {
				console.log(res);
				if (res.code == 1) {
					let list = res.data.data;
					this.newsList = this.page == 1 ? list : this.newsList.concat(list);
					console.log(this.newsList);
					if (list.length < this.size) this.status = 'nomore';
				}
			})
		},
			// 初始化列表
	
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				that.newsList = [],
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	/* #ifdef MP-WEIXIN || H5 */
	page{
		background: #FFFFFF;
	}
	/* #endif */
</style>
<style scoped lang="scss">
.list-item{
	width: 710rpx;
	min-height: 102rpx;
	margin: 0 auto;
	display: flex;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
}
.headimg{
	width: 102rpx;
	height: 102rpx;
	border-radius: 50%;
}
.center{
	width: 420rpx;
	min-height: 102rpx;
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 400;
	font-size: 28rpx;
	color: #333333;
	line-height: 36rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 36rpx;
}
.name{
	font-weight: 400;
	font-size: 32rpx;
	color: #333333;
}
.content{
	font-weight: 400;
	font-size: 28rpx;
	color: #333333;
}
.time{
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	margin-left: 10rpx;
}
.video_img{
	width: 80rpx;
	height: 102rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	margin-left: 20rpx;
}
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	
	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}
	
	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}
</style>